<template>
	<div class="content">
		<p style="height: 30rpx;"></p>
		<div class="nr_box">
			<div class="box">
				<p class="title"><span>*</span>展示标题</p>
				<input v-model="param.title" type="text" placeholder="请输入(10-20)字最佳，限制28字">
			</div>
			<div class="box">
				<p class="title"><span>*</span>所在地</p>
				<p class="text" @click="show = true">	
					{{param.areaName?param.areaName:'请选择'}}
					<u-icon
						color="#999"
						slot="right"
						name="arrow-right"
					></u-icon>
				</p>
			</div>
			<u-picker 
				keyName="shortname" 
				@cancel=closePop 
				@close="closePop" 
				closeOnClickOverlay 
				title="选择所在地"  
				:show="show" 
				ref="uPicker" 
				:columns="columns" 
				@change="changeHandler"
				@confirm="confirm"
			></u-picker>

			<div class="box">
				<p class="title"><span>*</span>服务类目</p>
				<p class="text" @click="showCategory = true">	
					{{param.categoryName?param.categoryName:'请选择'}}
					<u-icon
						color="#999"
						slot="right"
						name="arrow-right"
					></u-icon>
				</p>
			</div>
			<u-picker 
				@cancel="closeCategory" 
				@close="closeCategory" 
				closeOnClickOverlay 
				title="选择类目" 
				:show="showCategory" 
				:columns="categoryColumns"
				keyName="localName"
				@confirm="changeCategory"
			></u-picker>
			<div class="box box_textarea">
				<p class="title"><span>*</span>基本服务</p>
				<u--textarea v-model="param.basicServices" placeholder="请输入内容" ></u--textarea>
			</div>
			<div class="box box_textarea">
				<p class="title">擅长服务</p>
				<u--textarea v-model="param.adeptServices" placeholder="请输入内容" ></u--textarea>
			</div>
			<div class="box box_textarea">
				<p class="title">售后保证</p>
				<u--textarea v-model="param.afterSaleService" placeholder="请输入内容" ></u--textarea>
			</div>
			<div class="box box_textarea">
				<p class="title"><span>*</span>上传图片<span class="t_t">(上传您的证件照,办公环境或结案列为佳)</span></p>
				
				<div class="photo">
					<div class="img" v-for="(item,index) in param.pictures" :key="index">
						<img :src="item" alt="">
						<p class="close" @click="closeImg(index)">
							<u-icon name="trash" color="#fff" size="18"></u-icon>
						</p>
					</div>
					
					<div class="add" @click="changeImg" v-if="param.pictures.length < 3">
						<div class="mr" style="margin-right:0">
							<img src="/static/photo.png" alt="">
							<p>添加照片</p>
						</div>
						<!-- <p class="photo_num">{{imgList.length}} / 3</p> -->
					</div>
				</div>
                <p class="photo_num">{{param.pictures.length}} / 3</p>
            </div>
			<div class="anniu_box">
            	<!-- <p class="anniu" @click="toNext">下一步</p> -->
				<u-button 
					:disabled="isDisable"
					loadingMode="circle"
					:loading="isDisable"
					loadingText="发布中..."
					type="primary" 
					text="立即发布"
					@click="submit"
				>
				</u-button>
				<u-checkbox-group
					v-model="checkboxValue"
					placement="column"
					activeColor="#23AC39"
				>
					<u-checkbox
						:customStyle="{marginBottom: '8px'}"
						label="已阅读并同意《免责声明》"
					>
					</u-checkbox>
				</u-checkbox-group>
			</div>
		</div>
		<p style="height: 30rpx;"></p>
	</div>
</template>

<script>
	import { mapState ,mapActions} from 'vuex'
	import Config from '@/config/index.js'
	import api from '@/api';
	export default {
		data() {
			return {
				checkboxValue:[],
				columns: [],
                columnData: [],
				show:false,

				categoryColumns:[],
				showCategory:false,

				param:{
					title:'',
					area:'',
					areaName:'',
					category:'',
					categoryName:'',
					basicServices:'',
					adeptServices:'',
					afterSaleService:'',
					pictures:[],
				},
				isDisable:false,
				id:''
			}
		},
		computed: {
			...mapState({
                token: state => state.user.token
			})
		},
		onLoad(options) {
			console.log(options)
			if(options.id){
				this.id = options.id
				this.getById(options.id)
			}
			this.getAreaTree()

			this.getAppCategory()
		},
		onShow(){
			
		},
		methods: {

			// 回显
			getById(id){
				api.user.get_detail({id}).then(res=>{
					if(res.code == 200){
						if(res.data.pictures){
							res.data.pictures = res.data.pictures.split(',')
						}
						this.param.title = res.data.title
						this.param.area = res.data.area
						this.param.areaName = res.data.areaName
						this.param.category = res.data.category
						this.param.categoryName = res.data.categoryName
						this.param.adeptServices = res.data.adeptServices
						this.param.afterSaleService = res.data.afterSaleService
						this.param.pictures = res.data.pictures
						this.param.basicServices = res.data.basicServices
					}
				})
			},

			// 获取地区
			getAreaTree(){
				api.user.getAreaTree().then(res=>{
					this.columns = [res.data.level1]
					this.columnData = res.data.level2
					this.columns.push(res.data.level2[0])
					console.log(this.columns)
				})
			},

			confirm(e){
				console.log(e)
				this.param.area = e.value[1].id
				this.param.areaName = e.value[1].shortname
				this.closePop()
			},

			changeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e
                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                if (columnIndex === 0) {
                    // picker为选择器this实例，变化第二列对应的选项
                    picker.setColumnValues(1, this.columnData[index])
                }
            },
			closePop(){
				this.show = false
			},

			// 获取类目
			getAppCategory(){
				api.user.getAppLocalFirst().then(res=>{
					if(res.code == 200){
						this.categoryColumns = [res.data]
					}
				})
			},

			changeCategory(e){
				console.log(e)
				this.param.category = e.value[0].id
				this.param.categoryName = e.value[0].localName
				this.closeCategory()
			},

			// 关闭类目
			closeCategory(){
				this.showCategory = false
			},
			toNext(){
				uni.navigateTo({
					url: '/pages/local/fabu/next/index'
				});
			},



			// 选择图片
            changeImg(){
                if(this.param.pictures >= 3){
                    this.$toast('最多上传3张！')
                    return
                }
                let arr = []
                uni.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success :(res)=>{
                        uni.showLoading({title: '上传中...'})
                        console.log(res)
                        uni.uploadFile({
                            url: `${Config.apiUpload}`,
                            name: 'file',
                            method: 'POST',
                            filePath: res.tempFilePaths[0],
                            header: {
                                'Authorization': `Bearer ${this.token}`,
                            },
                            formData: {
                                file: res.tempFilePaths[0],
                            },
                            success: (res) => {
                                let returnData = JSON.parse(res.data)
                                arr.push(returnData.data)
                                this.param.pictures = this.param.pictures.concat(arr)
                                console.log(this.param.pictures)
                                uni.hideLoading()
                                this.$toast('上传成功！')
                            },
                            fail: (err) => {
                                uni.hideLoading()
                                this.$toast('上传失败，请重新上传！')
                            }
                        })
                    }
                })
            },

            closeImg(index){
                let arr = []
                arr = this.param.pictures
                arr.splice(index, 1)
                this.param.pictures = []
                this.param.pictures = arr
            },

			// 提交
			submit(){
				if(!this.param.title){
					this.$toast('请输入展示标题!')
                    return
				}
				if(!this.param.areaName){
					this.$toast('请选择所在地!')
                    return
				}
				if(!this.param.categoryName){
					this.$toast('请选择服务类目!')
                    return
				}
				if(!this.param.basicServices){
					this.$toast('请输入基本服务!')
                    return
				}
				if(!this.param.pictures.length){
					this.$toast('请上传图片!')
                    return
				}
				if(!this.checkboxValue.length){
                    this.$toast('请勾选免责声明!')
                    return
                }
				let obj = Object.assign({},this.param)
				if(obj.pictures.length){
					obj.pictures = obj.pictures.join(',')
				}
				console.log(obj)
				this.$showLoading('发布中...')
				this.isDisable = true

				if(this.id){
					obj.id = +this.id
				}
				let returnData = this.id?api.user.resubmit(obj):api.user.record_create(obj)
				returnData.then(res=>{
					if(res.code == 200){
						uni.redirectTo({
							url: '/pages/local/myFabu/index'
						});
						this.$toast('发布成功～')
					}else{
						uni.hideLoading();
						this.$toast(res.msg)
						this.isDisable = false
					}
				})
				console.log(obj)
			}
		},
	}
</script>

<style lang="scss" scoped>
	@mixin content-flex($pitch) {
		display: flex;
		align-items: center;
		justify-content:  $pitch;
	}
	.content{
		width: 100%;
		min-height: 100vh;
		background: #F7F7F7;
		.nr_box{
			padding:0 30rpx;
			margin:0 30rpx;
			background: #fff;
			border-radius: 15rpx;
			padding-bottom:50rpx;
			.box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom:1px solid #D8D8D8;
				padding:30rpx 0;
				.title{
					font-size:28rpx;
					color:#333;
					span{
						color:red;
					}
				}
				input{
					font-size:28rpx;
					flex: 1;
					text-align: right;
				}
				.text{
					display: flex;
					font-size:28rpx;
					color:#999;
				}
				&.box_textarea{
					display: block;
					border-bottom:none;
					padding-bottom:0;
					.title{
						padding-bottom:30rpx;
					}
					.t_t{
						font-size:26rpx;
						color:#999;
					}
					.photo{
            display: flex;
            flex-wrap:wrap;
            .add{
                .photo_num{
                    width: 220rpx;
                    font-size: 26rpx;
                    color: #999999;
                    text-align: center;
                }
            }
            .mr{
                width: 200rpx;
                height: 200rpx;
                border-radius: 12rpx;
                background: #f7f7f7;
                margin:0 14rpx 16rpx 0;
                flex-direction:column;
                @include content-flex(center);
                &:nth-child(3n){
                    margin-right:0;
                }
                img{
                    width: 64rpx;
                    height: 64rpx;
                    margin-bottom:4rpx;
                }
                p{
                    font-size: 24rpx;
                    color: #999999;
                }
            }
            .img{
                @extend .mr;
                position: relative;
                
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 12rpx;
                }
                .close{
                    width: 100%;
                    height: 50rpx;
                    background:rgba(0, 0, 0, 0.5);
                    position: absolute;
                    bottom:0;
                    left:0;
                    border-bottom-left-radius: 12rpx;
                    border-bottom-right-radius: 12rpx;
                    @include content-flex('center');
                    /deep/ .u-icon--right{
                        margin:0 auto;
                    }
                }
            }
        }
        .photo_num{
            font-size: 26rpx;
            color: #999999;
            margin:10rpx 0 30rpx 28rpx;
        }
				}
			}
			
		}

		.anniu_box{
			text-align: center;
			margin-top:60rpx;
			// .anniu{
			// 	width: 100%;
			// 	height: 96rpx;
			// 	line-height: 96rpx;
			// 	border-radius: 100rpx;
			// 	background: #23AC39;
			// 	font-size: 32rpx;
			// 	text-align: center;
			// 	font-weight: 500;
			// 	color:#fff;
			// }
			/deep/ .u-button{
                height: 96rpx;
                line-height: 96rpx;
                border-radius: 100rpx;
                background: #23AC39;
                text-align: center;
                font-weight: 500;
                color:#fff;
                border:none;
				text{
					font-size: 30rpx !important;
				}
            }
			/deep/ .u-checkbox{
				justify-content: center;
				margin-top:20rpx;
				text{
					color:#999999 !important;
					font-size: 26rpx !important;
				}
				.u-icon__icon{
					color:#fff !important;
				}
				.u-checkbox__icon-wrap{
					width: 32rpx !important;
					height: 32rpx !important;
				}
			}
		}
	}
</style>
